<md-dialog aria-label="Mango (Fruit)" style='width:70%;hight:60%;margin-top: 100px;'>
  <form name='myForm' novalidate >
  <md-content>
    <md-toolbar>
   <div class='col-sm-12 form-group'>
        <div class="md-toolbar-tools" >
        <h1>{{att}}</h1>
      </div>
   </div>
 </md-toolbar>
    <div class="col-sm-7">
     <div class="col-sm-12 form-group" ng-show="att==='修改'">
      <md-input-container flex>
        <label>角色编码:</label>
        <input  ng-model="roleCode" readonly    /> 
      </md-input-container>
    </div>

    <div class="col-sm-12 "  ng-show="att==='添加'">
        <md-input-container flex>
        <label>角色编码:<span style='color:red'>*</span></label>
         <input ng-model="roleCode"  placeholder="字母/数字必填项" ng-maxlength='6' ng-pattern='/^[A-Za-z0-9]+$/' name='roleCode' required/>
          </md-input-container>
    </div>

    <div class="col-sm-12 ">
        <md-input-container flex>
        <label>角色名称:<span style='color:red'>*</span></label>
        <input ng-maxlength='20' ng-model="roleName"    placeholder="必填" ng-pattern="/^[a-zA-Z0-9_\u4e00-\u9fa5]+$/" name ="roleName" required/>   
    </div>
       
<!--      <div class="col-sm-12"  >
         <label  style='color:#cbcbcb'>上级角色:<span style='color:red'>*</span></label>
          <md-select style='display:inline-block ; min-width : 200px' ng-model="parentRole" >
          <md-option ng-value="role.roleCode "   name='parentRole'    ng-repeat="role  in roles">{{role.roleName}}</md-option>
        </md-select>

    </div> -->
    
    <div class="col-sm-12 form-group" >
      <label class="text-right" style='color:#cbcbcb'>角色说明:</label>
        <textarea name = 'comtent' ng-maxlength='200' placeholder="非必填" ng-model="roleDetail"  rows="3" cols="69"></textarea>
    </div>
  </div>

  <div class='col-sm-5' ng-show="myForm.$invalid">
    <div class="col-sm-12 form-group" style='width:70%;hight:60%;margin-top:10px;' >
      <li style='color:red' ng-show='myForm.roleCode.$error.maxlength'>角色编码最大6个字符</span></li>
      <li style='color:red' ng-show='myForm.roleCode.$error.pattern'>角色编码只允许输入数字/字母</li>
      <li style='color:red' ng-show='myForm.roleCode.$error.required&&myForm.roleCode.$dirty'>角色编码不能为空</li>
      <li style='color:red' ng-show='myForm.roleCode.$error.required!=true&&checkCode&& myForm.roleCode.$dirty'>角色编码被占用请重新选择重复</li>
    </div>
    
    <div class="col-sm-12 form-group"  style='width:70%;hight:60%;margin-top:30px;'>
      <li style='color:red' ng-show='myForm.roleName.$error.required&&myForm.roleName.$dirty'>角色名称不能为空</li>
      <li style='color:red' ng-show='myForm.roleName.$error.maxlength'>角色名称最大20字符</li>
      <li style='color:red' ng-show='myForm.roleName.$error.pattern'>角色名称只允许输入字母/数字/汉字</li> 
      <li style='color:red' ng-show='myForm.roleName.$error.required!=true&&checkName&&myForm.roleName.$dirty'>角色名称被占用请重新输入</li> 
    </div>
    <div class="col-sm-12 form-group"  style='width:70%;hight:60%;margin-top:30px;'>
    </div>
    <div class="col-sm-12 form-group"  style='width:70%;hight:60%;margin-top:30px;'>
      <li style='color:red' ng-show='myForm.comtent.$error.maxlength'>角色说明不能超过200字符</li>
    </div>
  </div>
</md-content>
  <div class="md-actions" layout="row">
    <span flex></span>
    <md-button    ng-show="att=='添加'" ng-disabled='myForm.$invalid || myForm.comtent.$error.maxlength'ng-click="save(myForm.$invalid)">
      保存
    </md-button>
      <md-button   ng-show="att=='修改' "  ng-disabled='myForm.$invalid || myForm.comtent.$error.maxlength' ng-click="updata()">
      修改
    </md-button>
    <md-button ng-click="hide('useful')" class="md-primary">
      取消
    </md-button>
  </div>
</form>
</md-dialog>